<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
</head>
<style>
    html,
    body {
        background-color: #fbf9f9;
    }

    .padding {
        padding: 0 0.8rem;
        font-size: 0.6rem;
    }

    .padding .item {
        height: 2.5rem;
        line-height: 2.5rem;
        border-bottom: 1px solid #e8e8e8;
        font-size: 0.7rem;
    }

    .padding .item input {
        float: right;
        width: 60%;
        text-align: right;
        padding-right: 0.6rem;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.7rem;
    }

    .padding .item img {
        width: 0.8rem;
        height: 0.8rem;
        margin-top: 0.8rem;
        object-fit: scale-down;
        float: right;
    }

    .padding .item .user_avatar {
        float: left;
        width: 1.5rem;
        height: 1.5rem;
        margin-top: 0.5rem;
        border-radius: 50%;
        object-fit: scale-down;
    }

    .padding .item span {
        float: right;
        width: 2rem;
        height: 2rem;
        display: inline-block;
        border-radius: 40rem;
    }

    .padding .item .choose_tip {
        color: #000;
        border: 1px solid #ccc;
        border-radius: 0.3rem;
        /* padding: 0.2rem 0.3rem; */
        height: 1.5rem;
        line-height: 1.5rem;
        width: 3rem;
        text-align: center;
        float: right;
        font-size: 0.7rem;
        margin: 0.5rem 0.5rem 0 0;
    }

    .topDiv {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    .topDiv span {
        width: 11rem;
        /* background-color: skyblue; */
        color: #999;
    }

    .topDiv img {
        width: 4rem;
        height: 4rem;
        float: right;
        border-radius: 50%;
        object-fit: scale-down;
    }

    .tips {
        width: 100%;
        margin-bottom: 0.8rem;
    }

    .tips .title {
        color: #999;
        font-size: 0.8rem;
        line-height: 2rem;
        height: 2rem;
    }

    .tips img {
        width: 3rem;
        height: 3rem;
        margin-right: 0.5rem;
    }

    .chexkbox {
        height: 4rem;
        line-height: 4rem;
        background-color: #d3dde8;
        font-size: 0.6rem;
        width: 94%;
        padding: 0 3%;
    }

    .chexkbox img {
        width: 1rem;
        height: 1rem;
        margin-right: 0.3rem;
    }

    .submit {
        width: 50%;
        margin: 1rem 25%;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 0.8rem;
        text-align: center;
        border-radius: 1rem;
        background-color: #2882e1;
        color: #fff;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="topDiv">
            <span>完善信息登录祥愿堂医生端APP，才可使用全部功能，请放心真实信息，我们将严格保密</span>
            <img :src="IMAGE_HTTP + headimg" alt="">
        </div>
        <div class="padding">
            <div class="item">
                姓名
                <input type="text" v-model="name" placeholder="请填写您的真实姓名">
            </div>
            <div class="item">
                手机号码
                <input type="text" v-model="mobile" readonly="true" placeholder="请填写登录时的手机号码">
            </div>
            <div class="item" onclick="select_keshi()">
                科室
                <img src="../../image/arrow_right.png" alt="">
                <input type="text" readonly placeholder="请选择科室" v-model="select_keshi_on">
            </div>
            <div class="item" onclick="select_zhicheng()">
                职称
                <img src="../../image/arrow_right.png" alt="">
                <input type="text" readonly placeholder="请选择职称" v-model="select_zhicheng_on">
            </div>
            <div class="item" onclick="select_hospital()">
                医疗机构
                <img src="../../image/arrow_right.png" alt="">
                <input type="text" readonly placeholder="请选择医疗机构" v-model="select_hospital_on">
            </div>
            <div class="item" onclick="selectCity()">
                所在地
                <img src="../../image/arrow_right.png" alt="">
                <input type="text" readonly placeholder="请选择所在地" v-model="ssq_showtext">
            </div>
            <div class="item" onclick="uploadHeadimg(this)">
                <img :src="'https://oss.zetikeji.com' + headimg" class="user_avatar" alt="">
                <img src="../../image/arrow_right.png" alt="">
                <input type="text" readonly placeholder="请上传您清晰的免冠正面照片">
            </div>

            <div class="tips">
                <div class="title">上传头像实例</div>
                <img src="../../image/doctor_avater.png" alt="">
                <img src="../../image/doctor_avater.png" alt="">
            </div>
        </div>

        <div class="chexkbox" @click="agree = !agree">
            <img :src="[agree  ? '../../image/icon_radio_checked.png' : '../../image/icon_radio.png']" alt="">
            我已阅读并接受《祥愿堂服务协议》 与 《祥愿堂隐私政策》
        </div>

        <div class="submit" onclick="submit()">提交基础信息</div>
    </div>
</body>

</html>
<script src="../../script/set_root.js"></script>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.min.js"></script>
<script type="text/javascript" src="../../script/hb.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/vant.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();

        if (api.pageParam.index != 1) {
            toast("您是新注册的医生，请完善入驻资料")
        }
        // alert(JSON.stringify($api.getStorage("emp")))
        app.huancun = $api.getStorage("emp")
        // 获得科室数据
        get_ajax("doctor/department/tree", {}, function (res, err) {
            if (res.code == 2000) {
                app.select_keshi = res.data
            } else {
                toast("网络不通畅，请稍后再试!")
            }
        })
        // 获得医院数据
        get_ajax("portal/hospital/list/page", {
            page: app.page,
            pagesize: 100,
        }, function (res, err) {
            if (res.code == 2000) {
                // alert(JSON.stringify(res))
                app.select_hospital = res.data.data
            } else {
                toast("网络不通畅，请稍后再试！")
            }
        })
        // 获得职称数据
        get_ajax("doctor/jobtitle/all-list", {
            page: app.page,
            pagesize: 100,
            areaId: 810
        }, function (res, err) {
            if (res.code == 2000) {
                // alert(JSON.stringify(res))
                app.select_zhicheng = res.data
            } else {
                alert("网络不通畅，请稍后再试!")
            }
        })

        // 请求个人信息数据
        get_ajax("doctor/verify/view", {
            userId: $api.getStorage("emp").userId,
        }, function (res, err) {
            // alert(JSON.stringify(res))
            if (res.data) {
                app.headimg = res.data.avatar
                app.name = res.data.name
                //app.codeId = res.data.idcard
                app.select_keshi_id = res.data.departmentId
                app.select_keshi_on = res.data.department
                app.select_zhicheng_on = res.data.jobtitle
                app.select_zhicheng_id = res.data.jobtitleId
                app.select_hospital_on = res.data.hospital
                app.select_hospital_id = res.data.hospitalId
            }
        })
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            headimg: "/20201020/010950758f6966.png",
            page: 1,
            agree: false,
            name: "", // 姓名
            codeId: "", // 身份证号码
            mobile:"",
            select_keshi_on: "",
            select_keshi: [],
            select_keshi_id: "", // 科室id

            select_zhicheng_on: "",
            select_zhicheng: [],
            select_zhicheng_id: "", // 职称id

            select_hospital_on: "",
            select_hospital: [],
            select_hospital_id: "", // 医院id

            ssq_showtext: "请选择地区",
            level1_id: 0, // 省级id
            level2_id: 0, // 市级id
            level3_id: 0, // 区级id
            IMAGE_HTTP: IMAGE_HTTP,

            huancun: "", // 缓存数据
        },
        created:function(){
           this.mobile = $api.getStorage("emp").phone;
        },
        methods: {

        },

    })

    // 数据提交
    function submit() {
        if (!app.name) {
            toast("请填写您的真实姓名")
        }else if (!app.select_keshi_on) {
            toast("请选择科室")
        } else if (!app.select_zhicheng_on) {
            toast("请选择职称")
        } else if (app.select_zhicheng_id == 0) {
            toast("您选择的职称有问题哦")
        } else if (!app.select_hospital_on) {
            toast("请选择医疗机构")
        } else if (app.ssq_showtext == "请选择地区") {
            toast("请选择所在地")
        } else if (app.headimg == "/20201020/010950758f6966.png") {
            toast("您还没有上传头像")
        } else if (app.agree == false) {
            toast("请仔细阅读并同意服务协议及政策")
        } else {
            var data = {
                userId: $api.getStorage("emp").userId,
                avatar: app.headimg,
                name: app.name,
                departmentId: app.select_keshi_id,
                department: app.select_keshi_on,
                jobtitle: app.select_zhicheng_on,
                jobtitleId: app.select_zhicheng_id,
                provinceId: app.level1_id,
                cityId: app.level2_id,
                areaId: app.level3_id,
                hospital: app.select_hospital_on,
                hospitalId: app.select_hospital_id,
                mobile: $api.getStorage("emp").phone
            }
            post_ajax("doctor/save", data, function (res, err) {
                // alert(JSON.stringify(res))
                // alert(JSON.stringify(err))
              //  console.log(JSON.stringify(data))
                if (res.code == 2000) {
                    app.huancun.name = app.name
                    app.huancun.avatar = app.headimg
                    app.huancun.hospital = app.select_hospital_on
                    app.huancun.hospitalId = app.select_hospital_id
                    app.huancun.departmentId = app.select_keshi_id
                    app.huancun.department = app.select_keshi_on
                    app.huancun.jobtitle = app.select_zhicheng_on
                    app.huancun.jobtitleId = app.select_zhicheng_id
                    app.huancun.provinceId = app.level1_id
                    app.huancun.cityId = app.level2_id
                    app.huancun.areaId = app.level3_id
                    $api.setStorage("emp", app.huancun)
                    sendting("login")
                    toast("保存成功")
                    // alert(JSON.stringify($api.getStorage("emp")))
                    if (api.pageParam.index == 1) {
                        setTimeout(function () {
                            api.closeToWin({
                                name: 'widget://html/main'
                            });
                            api.closeToWin({
                                name: 'main'
                            });
                        }, 500);
                    } else {
                        api.openWin({
                            name: "verify_win",
                            url: "verify_win.html",
                            pageParam: {
                                userId: $api.getStorage("emp").userId,
                                avatar: app.headimg,
                                name: app.name,
                                idcard: app.codeId,
                                departmentId: app.select_keshi_id,
                                department: app.select_keshi_on,
                                jobtitle: app.select_zhicheng_on,
                                jobtitleId: app.select_zhicheng_id,
                                provinceId: app.level1_id,
                                cityId: app.level2_id,
                                areaId: app.level3_id,
                                hospital: app.select_hospital_on,
                                hospitalId: app.select_hospital_id,
                            }
                        })
                    }
                }
            })

        }
    }

    // 省市选择
    function selectCity() {
        var UIActionSelector = api.require('UIActionSelector');
        UIActionSelector.open({
            datas: 'widget://res/city.json',
            layout: {
                row: 5,
                col: 3,
                height: 30,
                size: 12,
                sizeActive: 14,
                rowSpacing: 5,
                colSpacing: 10,
                maskBg: 'rgba(0,0,0,0.2)',
                bg: '#FFFFFF',
                color: '#9B9B9D',
                colorActive: '#f00',
                colorSelected: '#000'
            },
            animation: true,
            cancel: {
                text: '取消',
                size: 12,
                w: 90,
                h: 35,
                bg: '#fff',
                bgActive: '#ccc',
                color: '#888',
                colorActive: '#fff'
            },
            ok: {
                text: '确定',
                size: 12,
                w: 90,
                h: 35,
                bg: '#fff',
                bgActive: '#ccc',
                color: '#888',
                colorActive: '#fff'
            },
            title: {
                text: '请选择',
                size: 12,
                h: 44,
                bg: '#eee',
                color: '#888'
            },
            fixedOn: api.frameName
        }, function (ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret));
                if (ret.eventType == 'ok') { //代表用户点了确认键
                    app.ssq_showtext = ret.level1 + ' ' + ret.level2 + ' ' + ret.level3
                    app.level1_id = ret.selectedInfo[0].id
                    app.level2_id = ret.selectedInfo[1].id
                    app.level3_id = ret.selectedInfo[2].id
                }

            } else {
                alert("网络不通畅，请稍后再试！");
            }
        });
    }

    // 选择科室
    function select_keshi() {
        var keshi_btns = []
        var keshi_ids = []
        for (var i = 0; i < app.select_keshi.length; i++) {
            keshi_btns.push(app.select_keshi[i].name)
            keshi_ids.push(app.select_keshi[i].id)
        }
        api.actionSheet({
            title: '',
            cancelTitle: '取消',
            buttons: keshi_btns
        }, function (ret, err) {
            var index = ret.buttonIndex; //下标从1开始
            for (var i = 0; i < keshi_btns.length; i++) {
                if (index - 1 == i) {
                    app.select_keshi_on = keshi_btns[i]
                    app.select_keshi_id = keshi_ids[i]
                }
            }
        });
    }

    // 选择职称
    function select_zhicheng() {
        var zhicheng_btns = []
        var zhicheng_ids = []
        for (i in app.select_zhicheng) {
            zhicheng_btns.push(app.select_zhicheng[i].name)
            zhicheng_ids.push(app.select_zhicheng[i].id)
        }
        api.actionSheet({
            title: '',
            cancelTitle: '取消',
            buttons: zhicheng_btns
        }, function (ret, err) {
            var index = ret.buttonIndex; //下标从1开始
            for (i in zhicheng_btns) {
                if (Number(index - 1) == Number(i)) {
                    app.select_zhicheng_on = zhicheng_btns[i]
                    app.select_zhicheng_id = zhicheng_ids[i]
                }
            }
            // alert(JSON.stringify(app.select_zhicheng_id))
        });
    }

    // 选择医院
    function select_hospital() {
        var hospital_btns = []
        var hospital_ids = []
        for (var i = 0; i < app.select_hospital.length; i++) {
            hospital_btns.push(app.select_hospital[i].name)
            hospital_ids.push(app.select_hospital[i].id)
        }
        api.actionSheet({
            title: '',
            cancelTitle: '取消',
            buttons: hospital_btns
        }, function (ret, err) {
            var index = ret.buttonIndex; //下标从1开始
            // if (index == 3) {
            //     return
            // }
            for (var i = 0; i < hospital_btns.length; i++) {
                if (index - 1 == i) {
                    app.select_hospital_on = hospital_btns[i]
                    app.select_hospital_id = hospital_ids[i]
                }
            }
        });
    }


    function uploadHeadimg() {
        api.actionSheet({
            title: '请选择方式',
            cancelTitle: '取消',
            buttons: ['相册', '拍照']
        }, function (ret, err) {
            var index = ret.buttonIndex;
            if (index == 3) {
                return
            }
            switch (index) {
                case 1:
                    //打开相册
                    var trs = isJuris('photos', '需要获取您的相册权限，才能上传照片，请问是否同意？'); //相机权限
                    if (!trs) {
                        toast("获取相册权限失败")
                        return;
                    }
                    api.getPicture({
                        sourceType: 'library',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        targetWidth: '780',
                        targetHeight: '1040',
                        destinationType: 'url',
                        quality: 70,
                        saveToPhotoAlbum: false
                    }, function (ret, err) {
                        if (ret && ret.data) {

                            //返回的本地路径
                            var returnUrl = ret.data;

                            // if (app.headimg != "") {
                            //     app.headimg = returnUrl
                            // }

                            ajax_upimg(returnUrl)
                        } else {
                            //alert("网络不通畅，请稍后再试！");
                        }
                    });
                    break;
                case 2:
                    //打开拍照
                    var trs = isJuris('camera', '需要获取您的相机权限，才能上传照片，请问是否同意？'); //相机权限
                    if (!trs) {
                        toast("获取相机权限失败")
                        return;
                    }
                    api.getPicture({
                        sourceType: 'camera',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        targetWidth: '780',
                        targetHeight: '1040',
                        destinationType: 'url',
                        quality: 70,
                        saveToPhotoAlbum: false
                    }, function (ret, err) {
                        if (ret && ret.data) {
                            //返回的本地路径
                            var returnUrl = ret.data;
                            // if (app.headimg != "") {
                            //     app.headimg = returnUrl
                            // }
                            ajax_upimg(returnUrl)
                        } else {
                            //alert("网络不通畅，请稍后再试！");
                        }
                    });
                    break;
            }
        });
    }

    //执行ajax上传图片
    function ajax_upimg(returnUrl) {
        // alert(returnUrl)
        api.ajax({
            url: "https://api.zetikeji.com/api/storage/file",
            method: 'post',
            data: {
                values: {
                    name: 'haha'
                },
                files: {
                    file: returnUrl
                }
            }
        }, function (ret, err) {
            if (ret.code) {
                // alert(ret)

                if (app.headimg != "") {
                    app.image = "/" + ret.data
                    app.headimg = "/" + ret.data
                }

            } else {
                // api.alert({
                //     msg: JSON.stringify(err)
                // });
            }
        });
    }
</script>
